import React from 'react';
import { Send, Loader2 } from 'lucide-react';

interface TextInputProps {
  value: string;
  onChange: (value: string) => void;
  onSubmit: () => void;
  isLoading: boolean;
  placeholder?: string;
}

export const TextInput: React.FC<TextInputProps> = ({
  value,
  onChange,
  onSubmit,
  isLoading,
  placeholder = "在这里输入你想表达的文字..."
}) => {
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      onSubmit();
    }
  };

  return (
    <div className="text-input-container">
      <div className="input-wrapper">
        <textarea
          className="text-input"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder={placeholder}
          disabled={isLoading}
          rows={4}
        />
        <button
          className="submit-button"
          onClick={onSubmit}
          disabled={isLoading || !value.trim()}
          title="生成情绪图片"
        >
          {isLoading ? (
            <Loader2 className="icon-spin" size={20} />
          ) : (
            <Send size={20} />
          )}
        </button>
      </div>
    </div>
  );
};